<template>
  <!-- 员工列表页面 -->
  <el-card>
    <!-- 卡片的顶部 -->
    <template #header>
      <h3>员工列表</h3>
    </template>
    <!-- 条件搜索区域 -->
    <el-form :inline="true" :model="searchData">
      <el-form-item label="账号">
        <el-input v-model="searchData.account" placeholder="账号" clearable @input="searchEmployee" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="searchData.nickname" placeholder="昵称" clearable @input="searchEmployee" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="searchData.telephone" placeholder="电话" clearable @input="searchEmployee" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchEmployee">搜索</el-button>
        <el-button type="success" @click="dialogFormVisible = true">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table border :data="empData">
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="telephone" label="电话"></el-table-column>
      <el-table-column prop="role" label="角色"></el-table-column>

      <el-table-column prop="isDel" label="状态">
        <template #default="scope">
          <span v-if="scope.row.isDel === 0">正常</span>
          <span v-else-if="scope.row.isDel === 1">禁用</span>
          <span v-else>离职</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="changeEmp(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteEmp(scope.row)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>
    <!-- 分页区域 -->
    <template #footer>
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 40, 100]"
        layout="total,  prev, pager, next" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </template>
  </el-card>
  <!-- 弹窗区 -->
  <!-- 添加的弹窗 
      el-dialog v-model 表单弹窗是否显示，true显示，false隐藏
    -->
  <el-dialog v-model="dialogFormVisible" title="添加用户" width="500">
    <!-- 表单 model：用于封装表单中的数据对象-->
    <el-form :model="addEmp">
      <el-form-item label="账户">
        <el-input v-model="addEmp.account" placeholder="账户" />
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="addEmp.password" placeholder="密码" />
      </el-form-item>

      <el-form-item label="昵称">
        <el-input v-model="addEmp.nickname" placeholder="昵称" />
      </el-form-item>

      <el-form-item label="电话">
        <el-input v-model="addEmp.telephone" placeholder="电话" />
      </el-form-item>

      <el-form-item label="角色">
        <el-input v-model="addEmp.role" placeholder="角色" />
      </el-form-item>

      <el-form-item label="状态">
        <el-input v-model="addEmp.isDel" placeholder="状态" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addEmployee"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 编辑的弹窗 -->
  <el-drawer v-model="drawer" title="编辑用户">
    <el-form :model="updateEmp">
      <el-form-item label="账户">
        <el-input v-model="updateEmp.account" placeholder="账户" clearable />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="updateEmp.password" placeholder="密码" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="updateEmp.nickname" placeholder="昵称" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="updateEmp.telephone" placeholder="电话" />
      </el-form-item>
      <el-form-item label="角色">
        <el-input v-model="updateEmp.role" placeholder="角色" />
      </el-form-item>
      <el-form-item label="状态">
        <el-input v-model="updateEmp.isDel" placeholder="状态" />
      </el-form-item>
      <el-form-item>
        <el-button @click="submitEmpData">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      // 控制修改的弹窗
      drawer: false,
      //默认添加的弹窗是false
      dialogFormVisible: false,
      // 分页的参数:
      currentPage: 1,
      pageSize: 10,
      total: 0,
      updateEmp: {
        account: "",
        password: "",
        username: "",
        telephone: "",
        role: "",
        isDel: ""
      },
      addEmp: {
        account: "",
        password: "",
        username: "",
        telephone: "",
        role: "",
        isDel: ""
      },

      // 搜索时对应的数据
      searchData: {},
      // 表格数据
      empData: []
    };
  },

  methods: {
    //点就搜索按钮触发方法
    searchEmployee() {
      // 发送ajax请求，根据条件查询
      axios.get("http://127.0.0.1:8080/javaweb_ele/findEmp", { params: this.searchData })
        .then((resp) => {

          // ElNotification({
          //   title: "成功",
          //   message: "您查询的信息如下",
          //   type: "success",
          // });
          // 将查询结果设置到表格中
          this.empData = resp.data;
          // this.searchData={};


        })

    },
    //点击添加弹窗里的提交按钮
    addEmployee() {
      axios.post("http://127.0.0.1:8080/javaweb_ele/addEmp", this.addEmp, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((resp) => {
          if (resp.data === 1) {
            ElNotification({
              title: "成功",
              message: "添加成功",
              type: "success",
            });
            this.loadEmpData(); // 重新加载数据
            this.dialogFormVisible = false; // 隐藏弹窗
            // 清空弹窗表单中的数据
            this.addEmp = {
              account: "",
              password: "",
              username: "",
              telephone: "",
              role: "",
              isDel: ""
            };
          }
        })
    },
    //点击修改弹窗中的提交按钮
    submitEmpData() {
      // 发送 POST 请求
      axios.post("http://127.0.0.1:8080/javaweb_ele/updateEmp", this.updateEmp, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((resp) => {
          if (resp.data === 1) {
            ElNotification({
              title: "成功",
              message: "修改成功",
              type: "success",
            });
            this.loadEmpData(); // 重新加载数据
            this.drawer = false; // 隐藏弹窗
          }
        });
    },

    // 点击修改按钮
    changeEmp(row) {
      // 让修改弹窗显示
      this.drawer = true;
      // 需要将当前这一行的数据复制给修改的对象
      this.updateEmp = row;
    },

    //点击删除按钮
    deleteEmp(row) {
      axios.get("http://127.0.0.1:8080/javaweb_ele/delEmp?id=" + row.id).then(resp => {
        // 成功之后,会调用then中传递的函数
        if (resp.data === 1) {
          ElNotification({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
          this.loadEmpData();
        }
      })
    },
    handleSizeChange() { },
    handleCurrentChange() { },

    // 定义一个方法，用于加载员工数据
    loadEmpData() {
      //axios.get("").then(() => { }).catch(() => { })
      axios.get("http://127.0.0.1:8080/javaweb_ele/emp").then(resp => {
        // 成功之后,会调用then中传递的函数
        this.empData = resp.data;
      })
    }

  },
  created() {
    this.loadEmpData();

  },
};
</script>

<style scoped></style>